<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-xs12">
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<li class="layui-this">轮播图</li>
<!-- 					<li>导航设置</li>
					<li>广告位</li> -->
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<table id="banner_hash" lay-filter="banner_hash" lay-even lay-skin="nob"></table>
					</div>
					<div class="layui-tab-item ">
						<table id="demo_hash" lay-filter="type_hash" lay-even lay-skin="nob"></table>
					</div>

				</div>
			</div>

			<!-- 协议 begin -->
			<script type="text/html" id="xystatus">
				<!--协议的状态 1为显示2为不显示 -->
  <input type="checkbox" name="tbAgreementStatus" value="{{d.tbId}}" lay-skin="switch" lay-filter="xystatusdome" {{ d.tbAgreementStatus == 1 ? 'checked' : '' }}>
</script>

			<script type="text/html" id="xytype">
				<!--协议的状态 1为显示2为不显示 -->
  {{# if(d.tbAgreementType === 1) { }}
		关于我们
		{{# } else if(d.tbAgreementType === 2) { }}
		服务
		{{# } else if(d.tbAgreementType === 3) { }}
		会员
		{{# } else if(d.tbAgreementType === 4) { }}
		平台
			{{#  }}}
</script>
			<script type="text/html" id="barDemo_hash">
				<a class="layui-btn" lay-event="edit">编辑</a>
								<a class="layui-btn" lay-event="look">详情</a>
								<a class="layui-btn" lay-event="del">删除</a>
       </script>

		</div>
	</div>
</div>
<script type="text/html" id="toolbarDemo">
	<div class="toobarbox">
	<div class="layui-btn-container" >
    <button class="layui-btn " lay-event="addbtn">添加协议</button>
    <button class="layui-btn layui-btn-primary" lay-event="delallbtn">删除选中</button>
  </div>
		
		<form lay-filter="xyselectform" >
			<div class="layui-inline" id="xylxform">
			<select name="shelves" lay-filter="xylxselect">
				<option value=" ">全部</option>
				<option value="1">已上架</option>
				<option value="2">预上架</option>
				<option value="3">已下架</option>
			</select>
		</div>
			<div class="tablesearch iconfont iconsousuo ">
	<input type="text" class="layui-input " id="xysearch" title="请输入搜索的关键字" placeholder="请输入搜索关键字">
		</div>
		
	
		</form>
			</div>
</script>
<!-- 协议 end -->

<!-- banner begin -->

<script type="text/html" id="toolbarDemo2">
	<div class="toobarbox">
	<div class="layui-btn-container" >
    <button class="layui-btn " lay-event="addbtn">新增广告图</button>
    <!-- <button class="layui-btn layui-btn-primary" lay-event="delallbtn">删除选中</button> -->
  </div>
		
		<div class="">
			<div class="layui-inline" id="bannerform">
			<select name="type" lay-filter="bannerselect">
				<option value="">全部</option>
				<option value="0">仅展示</option>
				<option value="1">注册</option>
				<option value="2">线上课程</option>
				<option value="3">线下</option>
			</select>
		</div>
			<div class="tablesearch iconfont iconsousuo ">
	<input type="text" class="layui-input " id="bannersearch" title="请输入搜索的关键字" placeholder="请输入搜索关键字">
		</div>
		
	
		</div>
			</div>
</script>

<script type="text/html" id="bannerstatus">
	<!--协议的状态 1为显示2为不显示 -->
  <input type="checkbox" name="tbAgreementStatus" lay-text="显示|隐藏"  value="{{d.id}}" lay-skin="switch" lay-filter="bannerstatusdome" {{ d.status == 1 ? 'checked' : '' }} />
</script>
<script type="text/html" id="barDemobanner_hash">
	<a class="layui-btn" lay-event="edit">编辑</a>
								<a class="layui-btn" lay-event="look">详情</a>
								<a class="layui-btn" lay-event="del">删除</a>
       </script>
<!-- banner end -->
<script>
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'element', 'table', 'sidebar', 'form'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form,
			element = layui.element;

		element.on('tab(docDemoTabBrief)', function(data) {
			//选项卡切换监听
		});
		//第一个实例 协议
		var typetable = table.render({
			size: 'lg',
			id: 'xytableid',
			where: {
				tbTitle: '',
				tbType: ''
			},
			contentType: 'application/json',
			pageSize: 20,
			elem: '#demo_hash',
			toolbar: '#toolbarDemo',
			height: '',
			url: HH_URL + AgreementGet, //数据接口
			page: true, //开启分页
			even: true,
			skin: 'nob',
			cellMinWidth: 100,
			cols: [
				[ //表头
					{
						type: 'numbers',
						fixed: 'left'
					}, {
						field: 'tbId',
						title: 'ID',
						hide: true
					}, {
						field: 'tbTitle',
						title: '标题',
					}, {
						field: 'tbAgreementType',
						title: '类型',
						templet: '#xytype',
						width: 120
					}, {
						field: 'tbName',
						title: '操作人',
						width: 120
					}, {
						field: 'createTime',
						title: '创建时间',
						width: 120
					}, {
						field: 'tbAgreementStatus',
						title: '状态',
						width: 85,
						templet: '#xystatus',
						unresize: true
					}, {
						title: '操作',
						fixed: 'right',
						width: 180,
						toolbar: '#barDemo_hash'
					}
				]
			],
			done: function(res, curr, cont) {
				// typetable = table.render();

				$('#xysearch').keydown(function(event) {
					if (event.keyCode == 13) {
						xykey = $('#xysearch').val();
						table.reload('xytableid', {
							where: { //设定异步数据接口的额外参数，任意设
								tbTitle: $('#xysearch').val(),
							},
							page: {
								curr: 1 //重新从第 1 页开始
							}
						}, 'data');
						// setTimeout(function(){
						$("#xysearch").val(xykey)
						// },100)
					}

				})
			}
		});
		var xytype = ' ',
			xykey = '';
		form.on('select(xylxselect)', function(data) {
			xytype = data.value;
			table.reload('xytableid', {
				where: { //设定异步数据接口的额外参数，任意设
					tbType: data.value,
				},
				page: {
					curr: 1 //重新从第 1 页开始
				}
			}, 'data');
			$("#xylxform").find("option[value='" + xytype + "']").prop("selected", true);


		});

		//监听事件
		table.on('toolbar(type_hash)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			switch (layEvent) {
				case 'delallbtn':
					//批量删除行数
					// console.log(checkStatus.data);
					var tbarray = [];
					$.each(checkStatus.data, function(idx, obj) {
						tbarray.push(obj.tbId);
					})

					layer.confirm('确认删除所选中行的数据吗?', function(index) {
						POSTAJAX(AgreementDel, {
							ids: tbarray
						}, function(res) {
							layer.close(index);
							layer.msg(res.msg);
							if (res.status == 200) {
								table.reload('xytableid', {
									page: {
										curr: 1 //重新从第 1 页开始
									}
								}, 'data');
							}
						})
						//向服务端发送删除指令
					});

					break;
				case 'addbtn':
					location.href = "#/banner/richtext"

					break;
				default:

					break;
			}
		});

		form.on('switch(xystatusdome)', function(obj) {
			// 监听协议的状态替换
			if (obj.elem.checked) {
				var checknum = 1
			} else {
				var checknum = 2
			}
			POSTAJAX(AgreementModState, {
				tbAgreementStatus: checknum,
				tbId: obj.value
			}, function(res) {
				if (res.status == 200) {
					layer.msg("状态修改成功", {
						"icon": 1
					});
				}
			})
		});

		//监听工具条
		table.on('tool(type_hash)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			switch (layEvent) {
				case 'look':

					break;
				case 'del':
					delfn({
						ids: [obj.data.tbId]
					}, obj);

					break;
				case 'edit':
					location.href = "#/banner/richtext?tbId=" + obj.data.tbId
					break;

				default:

					break;
			}

		});

		function delfn(tdata, obj) {
			layer.confirm('确认删除该协议吗?', function(index) {
				POSTAJAX(AgreementDel, tdata, function(res) {
					layer.close(index);
					layer.msg(res.msg);
					if (res.status == 200) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					}
				})
				//向服务端发送删除指令
			});
		}

		//banner begin 
		var bannertable = table.render({
			size: 'lg',
			id: 'bannertableid',
			where: {
				tbTitle: ''
			},
			contentType: 'application/json',
			pageSize: 20,
			elem: '#banner_hash',
			toolbar: '#toolbarDemo2',
			height: 'full-200',
			url: HH_URL + BannerGet, //数据接口
			page: true, //开启分页
			even: true,
			skin: 'nob',
			cellMinWidth: 100,
			cols: [
				[ //表头
				{
					title:'序号',
					type: 'numbers',
					fixed: 'left',
						width: 50,
				}, 
					{
						field: 'id',
						title: 'ID',
						hide: true
					},
					{
						field: 'imgurl',
						title: '图片1',
						width: 160,
						templet: function(d) {
							if (d.imgurl == '') {
								return ''
							} else {
								return '<img style="width: 100%;" src="' + IMG_URL + d.imgurl + '" class="lookimgcss" > '
							}

						}
					}, {
						field: 'mobileUrl',
						title: '图片2',
						templet: function(d) {
							if (d.mobileUrl == null) {
								return ''
							} else {
								return '<img style="width: 100%;" src="' + IMG_URL + d.mobileUrl + '" class="lookimgcss" > '
							}
						},
						width: 160
					},
					{
						field: 'title',
						title: '名称'
					},
					{
						field: 'offlineUrl',
						title: '链接地址',
						// templet: '#xytype',
						width: 120
					},
					{
						field: 'tbName',
						title: '操作人',
						width: 120
					}, {
						field: 'createTime',
						title: '创建时间',
						width: 200
					}, {
						field: 'status',
						title: '状态',
						width: 100,
						templet: '#bannerstatus',
						unresize: true
					}, {
						title: '操作',
						fixed: 'right',
						width: 180,
						toolbar: '#barDemo_hash'
					}
				]
			],
			done: function(res, curr, cont) {
				console.log(res)
				bannertable = table.render();
				$('#bannersearch').keydown(function(event) {
					if (event.keyCode == 13) {
						bannerkey = $('#bannersearch').val();
						table.reload('bannertableid', {
							where: { //设定异步数据接口的额外参数，任意设
								tbTitle: $('#bannersearch').val(),
							},
							page: {
								curr: 1 //重新从第 1 页开始
							}
						}, 'data');
						// setTimeout(function() {
						$("#bannersearch").val(bannerkey)
						// }, 1000)
					}
				})

				$(".lookimgcss").on("click", function() {
					layer.open({
						type: 1,
						title: false,
						closeBtn: 0,
						area: ['80%', 'auto'],
						skin: 'layui-layer-nobg', //没有背景色
						shadeClose: true,
						content: ' <img style="width:100%" src="' + $(this).attr("src") + '"  alt="banner"  >'
					});
				})
			}
		});

		form.on('switch(bannerstatusdome)', function(obj) {
			// 监听协议的状态替换
			if (obj.elem.checked) {
				var checknum = 1
			} else {
				var checknum = 0
			}
			POSTAJAX(BannerMod, {
				status: checknum,
				id: obj.value
			}, function(res) {
				if (res.status == 200) {
					layer.msg("状态修改成功", {
						"icon": 1
					});
				}
			})
		});

		//监听事件
		table.on('toolbar(banner_hash)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象

			if (layEvent == 'delallbtn') {
				var tbarray = [];
				$.each(checkStatus.data, function(idx, obj) {
					tbarray.push(obj.id);

				})

				layer.confirm('确认删除所选中行的数据吗?', function(index) {
					POSTAJAX(BannerDel, {
						ids: tbarray
					}, function(res) {
						layer.close(index);
						layer.msg(res.msg);
						if (res.status == 200) {
							table.reload('bannertableid', {
								page: {
									curr: 1 //重新从第 1 页开始
								}
							}, 'data');
						}
					})
					//向服务端发送删除指令
				});
			} else if (layEvent == 'addbtn') {
				location.href = "#/banner/bannerup"
			}
		});

		var bannertype = ' ',
			bannerkey = '';
		form.on('select(bannerselect)', function(data) {
			table.reload('bannertableid', {
				where: { //设定异步数据接口的额外参数，任意设
					type: data.value,
				},
				page: {
					curr: 1 //重新从第 1 页开始
				}
			}, 'data');
			bannertype = data.value;
			$("#bannerform").find("option[value='" + bannertype + "']").prop("selected", true);
		});

		// 工具条
		//监听工具条
		table.on('tool(banner_hash)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			switch (layEvent) {
				case 'look':
					// layer.msg(JSON.stringify(obj.data));
					location.href = "#/banner/homepage"
					break;
				case 'del':
					delbannerfn({
						ids: [obj.data.id]
					}, obj);

					break;
				case 'edit':
					location.href = "#/banner/bannerup?id=" + obj.data.id
					break;

				default:

					break;
			}

		});

		function delbannerfn(tdata, obj) {
			layer.confirm('确认删除吗?', function(index) {
				POSTAJAX(BannerDel, tdata, function(res) {
					layer.close(index);
					layer.msg(res.msg);
					if (res.status == 200) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					}
				})
				//向服务端发送删除指令
			});
		}

		//banner end

	});
</script>

<style scoped>

</style>
